<template>
  <div id="con">
    <div class="top">
      <Header></Header>
    </div>
    <div class="main">
      <router-view />
    </div>
    <div class="bottom">
      <Bottom></Bottom>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapGetters, mapState } from "vuex"; // 引入map方法
import Header from '@/components/header/index';
import Bottom from '@/components/bottom/index';
import Home from './home';
import Goods from '@/views/goods/index'
import See from '@/views/see/index'
export default {
  components:{
    Header,
    Bottom,
    Goods,
    Home,
    See
  },
  data() {
    return {
      num: 0,
     
    };
  },
  methods: {
    ...mapMutations({
      // 调用setNum方法
      setNum: "SET_NUM"
    }),
    increase() {
      this.num++;
      this.setNum(this.num); // 将this.num转入setNum
    },
  },
  computed: {
    // ...mapGetters([           // 通过getters获取state数据
    //   'number'
    // ]),
    ...mapState({
      // 通过state获取state数据
      number: state => state.home.number
    })
  }
};
</script>
<style lang="scss" scoped>
#con {
  width: 100%;
  height: 100%;
  .main {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    .block:nth-child(odd) {
      margin: 10px;
    }
    .block {
      width: 20%;
      ul {
        display: flex;
        height: 65px;
        flex-wrap: wrap;
        border: 1px solid #000;
        li {
          width: 50%;
        }
        li:nth-child(2) {
          border-left: 1px dashed #000;
        }
        li:nth-child(3) {
          border-top: 1px dashed #000;
        }
        li:nth-child(4) {
          border-left: 1px dashed #000;
          border-top: 1px dashed #000;
        }
      }
    }
    .block:nth-child(4n + 1) {
      margin-left: 0;
    }
  }
}
</style>


